<!--
 * @Description: 分公司看板-商务数据看板
 * @Author: wind-lc
 * @version: 1.0
 * @Date: 2024-03-01 11:08:02
 * @LastEditTime: 2024-03-01 15:42:04
 * @FilePath: \cscec-pms-admin\src\views\businessAffairs\businessCostPlanManagement\headquartersDashboard\index.vue
-->

<template>
  <base-breadcrumb>
    <a-spin :spinning="spinning">
      <fullScreen />
      <!-- 通用看版 -->
      <div class="btn_box page-btn-right-top" v-show="code === 'CO'">
        <a-button @click="superior">上一级</a-button>
      </div>
      <a-card :bordered="false">
        <title-name title="通用看版" />
        <a-row type="flex" justify="space-between">
          <a-col :span="24" v-for="(item, index) in generalList" :key="index">
            <p class="titleClass"><span class="dotClass"></span>{{ item.eBarData.title }}</p>
            <EBar ref="accomplishRatio" :eBarData="item.eBarData" :ready="genera" :id="'generalList' + index" :isDataZoom="true" :zoom="true" />
          </a-col>
        </a-row>
      </a-card>
      <!-- 土建看版 -->
      <!-- id  不等于 安装 装饰 水利 基础 -->
      <a-card :bordered="false" v-if="id != 'ecf764c08dd94fa889ce31c380b1241c' && id != 'cdcfa929b51a47269f336364860c9f0c' && id != 'f44b6091121948dba23639dd22940b44 ' && id != 'a7474006f9df455c8be77c617972eb77 '">
        <title-name title="土建看版" />
        <a-row type="flex" justify="space-between">
          <a-col :span="24" v-for="(item, index) in buildingList" :key="index">
            <p class="titleClass"><span class="dotClass"></span>{{ item.eBarData.title }}</p>
            <EBar ref="accomplishRatio" :eBarData="item.eBarData" :ready="building" :id="'buildingList' + index" :isDataZoom="true" :zoom="true" />
          </a-col>
        </a-row>
      </a-card>
      <!-- 安装看板 -->
      <a-card :bordered="false" v-if="id === 'ecf764c08dd94fa889ce31c380b1241c'">
        <title-name title="安装看板" />
        <a-row type="flex" justify="space-between">
          <a-col :span="24" v-for="(item, index) in installList" :key="index">
            <p class="titleClass"><span class="dotClass"></span>{{ item.eBarData.title }}</p>
            <EBar ref="accomplishRatio" :eBarData="item.eBarData" :ready="install" :id="'installList' + index" :isDataZoom="true" :zoom="true" />
          </a-col>
        </a-row>
      </a-card>
      <!-- 装饰看板 -->
      <a-card :bordered="false" v-if="id === 'cdcfa929b51a47269f336364860c9f0c'">
        <title-name title="装饰看板" />
        <a-row type="flex" justify="space-between">
          <a-col :span="24" v-for="(item, index) in decorateList" :key="index">
            <p class="titleClass"><span class="dotClass"></span>{{ item.eBarData.title }}</p>
            <EBar ref="accomplishRatio" :eBarData="item.eBarData" :ready="decorate" :id="'decorateList' + index" :isDataZoom="true" :zoom="true" />
          </a-col>
        </a-row>
      </a-card>
    </a-spin>
  </base-breadcrumb>
</template>

<script>
import EBar from '../../headquartersDashboard/components/EBar/EBar.vue'
import fullScreen from '../../headquartersDashboard/components/fullScreen/fullScreen.vue'
import { getFgsCommonBulletinBoard, getFgsCivilEngineeringBulletinBoard, getFgsInstallBulletinBoard, getFgsDecorationBulletinBoard } from '@/api/businessAffairs/businessCostPlanManagement.js'
export default {
  name: 'business',

  components: {
    EBar,
    fullScreen
  },
  data() {
    return {
      // 通用看版数据
      spinning: false,
      generalList: [
        {
          eBarData: {
            title: '产值确权率',
            legend: {
              // left: '14%',
              // top:'6%',
              data: ['产值确权率']
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              },
              formatter: function(params) {
                var value = params[0].value
                return params[0].name + '<br/>' + params[0].seriesName + ':' + value + '%'
              }
            },
            color: ['#4874cb'],
            // dataZoom: {
            //   show: true,
            //   realtime: true,
            //   // type:'slider',
            //   y: 220,
            //   height: 20,
            //   start: 0,
            //   end: 80
            // },
            name: '（%）', //单位
            xAxis: {
              type: 'category',
              data: [],
              axisLabel: {
                color: '#666',
                interval: 0,
                rotate: 30
              }
            },
            // nameList:
            data: [
              {
                name: '产值确权率',
                data: [],
                type: 'bar'
              }
            ]
          }
        },
        {
          eBarData: {
            title: '工程计量确认率',
            legend: {
              // left: '14%',
              // top:'6%',
              data: ['工程计量确认率']
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              },
              formatter: function(params) {
                var value = params[0].value
                return params[0].name + '<br/>' + params[0].seriesName + ':' + value + '%'
              }
            },
            color: ['#4874cb'],
            name: '(%)', //单位
            xAxis: {
              type: 'category',
              data: [],
              axisLabel: {
                color: '#666',
                interval: 0,
                rotate: 30
              }
            },
            // nameList:
            data: [
              {
                name: '工程计量确认率',
                data: [],
                type: 'bar'
                // barWidth: '10%'
              }
            ]
          }
        },
        {
          eBarData: {
            title: '直接费与间接费比例',
            legend: {
              // left: '14%',
              // top:'6%',
              data: ['直接费', '间接费']
            },
            color: ['#4874cb', '#73deb4'],
            name: '(%)', //单位
            xAxis: {
              type: 'category',
              data: [],
              axisLabel: {
                color: '#666',
                interval: 0,
                rotate: 30
              }
            },
            // nameList:
            data: [
              {
                name: '直接费',
                data: [],
                type: 'bar',
                stack: 'Ad',
                emphasis: {
                  focus: 'series'
                }
                // barWidth: '10%'
              },
              {
                name: '间接费',
                data: [],
                type: 'bar',
                stack: 'Ad',
                emphasis: {
                  focus: 'series'
                }
                // barWidth: '10%'
              }
            ]
          }
        },
        {
          eBarData: {
            title: '管理费占比',
            legend: {
              // left: '14%',
              // top:'6%',
              data: ['管理费占比']
            },
            color: ['#81d3f8'],
            name: '(%)', //单位
            xAxis: {
              type: 'category',
              data: [],
              axisLabel: {
                color: '#666',
                interval: 0,
                rotate: 30
              }
            },
            // nameList:
            data: [
              {
                name: '管理费占比',
                data: [],
                type: 'bar'
              }
            ]
          }
        },
        {
          eBarData: {
            title: '安全文明施工费占比',
            legend: {
              // left: '14%',
              // top:'6%',
              data: ['安全文明施工费占比']
            },
            color: ['#ee823a'],
            name: '(%)', //单位
            xAxis: {
              type: 'category',
              data: [],
              axisLabel: {
                color: '#666',
                interval: 0,
                rotate: 30
              }
            },
            // nameList:
            data: [
              {
                name: '安全文明施工费占比',
                data: [],
                type: 'bar'
              }
            ]
          }
        },
        {
          eBarData: {
            title: '临建占比',
            legend: {
              // left: '14%',
              // top:'6%',
              data: ['临建占比']
            },
            color: ['#73deb4'],
            name: '(%)', //单位
            xAxis: {
              type: 'category',
              data: [],
              axisLabel: {
                color: '#666',
                interval: 0,
                rotate: 30
              }
            },
            // nameList:
            data: [
              {
                name: '临建占比',
                data: [],
                type: 'bar'
              }
            ]
          }
        },
        {
          eBarData: {
            title: '变洽签占比',
            legend: {
              // left: '14%',
              // top:'6%',
              data: ['变洽签占比']
            },
            color: ['#4874cb'],
            name: '(%)', //单位
            xAxis: {
              type: 'category',
              data: [],
              axisLabel: {
                color: '#666',
                interval: 0,
                rotate: 30
              }
            },
            // nameList:
            data: [
              {
                name: '变洽签占比',
                data: [],
                type: 'bar'
              }
            ]
          }
        }
      ],
      genera: false,
      // 土建看版数据
      buildingList: [
        {
          eBarData: {
            title: 'CI平米成本',
            legend: {
              // left: '14%',
              // top:'6%',
              data: ['CI平米成本']
            },
            color: ['#4874cb'],
            // dataZoom: {
            //   show: true,
            //   realtime: true,
            //   // type:'slider',
            //   y: 220,
            //   height: 20,
            //   start: 0,
            //   end: 80
            // },
            name: '（元）', //单位
            xAxis: {
              type: 'category',
              data: [],
              axisLabel: {
                color: '#666',
                interval: 0,
                rotate: 30
              }
            },
            // nameList:
            data: [
              {
                name: 'CI平米成本',
                data: [],
                type: 'bar'
              }
            ]
          }
        },
        {
          eBarData: {
            title: '物业平米成本',
            legend: {
              // left: '14%',
              // top:'6%',
              data: ['物业平米成本']
            },
            color: ['#4874cb'],
            name: '(元)', //单位
            xAxis: {
              type: 'category',
              data: [],
              axisLabel: {
                color: '#666',
                interval: 0,
                rotate: 30
              }
            },
            // nameList:
            data: [
              {
                name: '物业平米成本',
                data: [],
                type: 'bar'
                // barWidth: '10%'
              }
            ]
          }
        },
        {
          eBarData: {
            title: '标准化平米成本',
            legend: {
              // left: '14%',
              // top:'6%',
              data: ['标准化平米成本']
            },
            color: ['#4874cb'],
            name: '(元)', //单位
            xAxis: {
              type: 'category',
              data: [],
              axisLabel: {
                color: '#666',
                interval: 0,
                rotate: 30
              }
            },
            // nameList:
            data: [
              {
                name: '标准化平米成本',
                data: [],
                type: 'bar'
                // barWidth: '10%'
              }
            ]
          }
        },
        {
          eBarData: {
            title: '脚手架平米成本',
            legend: {
              // left: '14%',
              // top:'6%',
              data: ['脚手架平米成本']
            },
            color: ['#4874cb'],
            name: '(元)', //单位
            xAxis: {
              type: 'category',
              data: [],
              axisLabel: {
                color: '#666',
                interval: 0,
                rotate: 30
              }
            },
            // nameList:
            data: [
              {
                name: '脚手架平米成本',
                data: [],
                type: 'bar'
              }
            ]
          }
        },
        {
          eBarData: {
            title: '模板平米成本',
            legend: {
              // left: '14%',
              // top: '6%',
              data: ['模板平米成本(材料)', '模板平米成本(人工)']
            },
            color: ['#4874cb', '#73deb4'],
            name: '(元)', //单位
            xAxis: {
              type: 'category',
              data: [],
              axisLabel: {
                color: '#666',
                interval: 0,
                rotate: 30
              }
            },
            // nameList:
            data: [
              {
                name: '模板平米成本(材料)',
                data: [],
                type: 'bar',
                stack: 'Ad',
                emphasis: {
                  focus: 'series'
                }
              },
              {
                name: '模板平米成本(人工)',
                data: [],
                type: 'bar',
                stack: 'Ad',
                emphasis: {
                  focus: 'series'
                }
                // barWidth: '10%'
              }
            ]
          }
        }
        // {
        //   eBarData: {
        //     title: '模板平米成本(人工)',
        //     legend: {
        //       // left: '14%',
        //       // top: '6%',
        //       data: ['模板平米成本(人工)']
        //     },
        //     color: ['#4874cb'],
        //     name: '(元)', //单位
        //     xAxis: {
        //       type: 'category',
        //       data: [],
        //       axisLabel: {
        //         color: '#666',
        //         interval: 0,
        //         rotate: 30
        //       },
        //     },
        //     // nameList:
        //     data: [
        //       {
        //         name: '模板平米成本(人工)',
        //         data: [],
        //         type: 'bar',
        //         label: {
        //           show: true,
        //           position: 'top',
        //         },
        //         // barWidth: '10%'
        //       },
        //     ]
        //   }
        // },
      ],
      building: false,
      // 安装看板数据
      installList: [
        {
          eBarData: {
            title: '给排水工程平米成本',
            legend: {
              // left: '7%',
              // top:'6%',
              data: ['给排水工程平米成本']
            },
            color: ['#4874cb'],
            // dataZoom: {
            //   show: true,
            //   realtime: true,
            //   // type:'slider',
            //   y: 220,
            //   height: 20,
            //   start: 0,
            //   end: 80
            // },
            name: '（元）', //单位
            xAxis: {
              type: 'category',
              data: [],
              axisLabel: {
                color: '#666',
                interval: 0,
                rotate: 30
              }
            },
            // nameList:
            data: [
              {
                name: '给排水工程平米成本',
                data: [],
                type: 'bar'
              }
            ]
          }
        },
        {
          eBarData: {
            title: '电气工程平米成本',
            legend: {
              // left: '7%',
              // top:'6%',
              data: ['电气工程平米成本']
            },
            color: ['#4874cb'],
            name: '(元)', //单位
            xAxis: {
              type: 'category',
              data: [],
              axisLabel: {
                color: '#666',
                interval: 0,
                rotate: 30
              }
            },
            // nameList:
            data: [
              {
                name: '电气工程平米成本',
                data: [],
                type: 'bar'
                // barWidth: '10%'
              }
            ]
          }
        },
        {
          eBarData: {
            title: '暖通工程平米成本',
            legend: {
              // left: '7%',
              // top:'6%',
              data: ['暖通工程平米成本']
            },
            color: ['#4874cb'],
            name: '(元)', //单位
            xAxis: {
              type: 'category',
              data: [],
              axisLabel: {
                color: '#666',
                interval: 0,
                rotate: 30
              }
            },
            // nameList:
            data: [
              {
                name: '暖通工程平米成本',
                data: [],
                type: 'bar'
                // barWidth: '10%'
              }
            ]
          }
        },
        {
          eBarData: {
            title: '各类实际成本占比',
            legend: {
              // left: '7%',
              // top:'6%',
              data: ['给排水工程实际成本占比', '电气工程实际成本占比', '暖通工程实际成本占比']
            },
            color: ['#74a0fa', '#73deb4', '#81d3f8'],
            name: '(%)', //单位
            xAxis: {
              type: 'category',
              data: [],
              axisLabel: {
                color: '#666',
                interval: 0,
                rotate: 30
              }
            },
            // nameList:
            data: [
              {
                name: '给排水工程实际成本占比',
                data: [],
                type: 'bar',
                stack: 'Ad',
                emphasis: {
                  focus: 'series'
                }
                // barWidth: '10%'
              },
              {
                name: '电气工程实际成本占比',
                data: [],
                type: 'bar',
                stack: 'Ad',
                emphasis: {
                  focus: 'series'
                }
                // barWidth: '10%'
              },
              {
                name: '暖通工程实际成本占比',
                data: [],
                type: 'bar',
                stack: 'Ad',
                emphasis: {
                  focus: 'series'
                }
                // barWidth: '10%'
              }
            ]
          }
        }
      ],
      install: false,
      //装饰看板数据
      decorateList: [
        {
          eBarData: {
            title: '装饰看版',
            legend: {
              // left: '7%',
              // top:'6%',
              data: ['精装平米成本']
            },
            color: ['#4874cb'],
            name: '(元)', //单位
            xAxis: {
              type: 'category',
              data: [],
              axisLabel: {
                color: '#666',
                interval: 0,
                rotate: 30
              }
            },
            // nameList:
            data: [
              {
                name: '精装平米成本',
                data: [],
                type: 'bar'
              }
            ]
          }
        },
        {
          eBarData: {
            title: '外装平米成本',
            legend: {
              // left: '7%',
              // top:'6%',
              data: ['外装平米成本']
            },
            color: ['#4874cb'],
            name: '(元)', //单位
            xAxis: {
              type: 'category',
              data: [],
              axisLabel: {
                color: '#666',
                interval: 0,
                rotate: 30
              }
            },
            // nameList:
            data: [
              {
                name: '外装平米成本',
                data: [],
                type: 'bar'
              }
            ]
          }
        }
      ],
      decorate: false,
      id: this.$userInfo()?.currentPost?.id,
      cid: this.$userInfo()?.currentPost?.id,
      code: this.$userInfo()?.currentPost?.code,
      timer1: null,
      timer2: null,
      timer3: null,
      timer4: null
    }
  },
  watch: {
    //监听路由变更
    $route(newVal) {
      // console.log(newVal, 'newVal');
      if (newVal.path == '/businessAffairs/businessCostPlanManagement/branchDashboard/business') {
        if (newVal.query.id) {
          this.id = newVal.query.id
          this.$nextTick(() => {
            this.getGeneralData()
            this.getEngineeringData()
            this.getInstallData()
            this.getDecorationData()
          })
        }
      }
    }
  },
  created() {
    if (this.$route.query.id) {
      this.id = this.$route.query.id
    }
    // code === 'BC' id
    // code === 'PD' projectId
    // code === 'CO' ''

    this.$nextTick(() => {
      this.getGeneralData()
      this.getEngineeringData()
      this.getInstallData()
      this.getDecorationData()
    })
  },
  methods: {
    superior() {
      this.$router.push('/businessAffairs/businessCostPlanManagement/headquartersDashboard/business')
    },
    getGeneralData() {
      this.spinning = true
      this.genera = false
      this.generalList.forEach(item => {
        item.eBarData.xAxis.data = []
        item.eBarData.data.forEach(son => {
          son.data = []
        })
      })
      clearTimeout(this.timer1)
      this.timer1 = setTimeout(async () => {
        const { data } = await getFgsCommonBulletinBoard({ id: this.id })
        data.outputValueConfirmationRate.forEach(item => {
          this.generalList[0].eBarData.xAxis.data.push(item.name)
          this.generalList[0].eBarData.data[0].data.push(item.rate)
        })
        data.meteringConfirmationRate.forEach(item => {
          this.generalList[1].eBarData.xAxis.data.push(item.name)
          this.generalList[1].eBarData.data[0].data.push(item.rate)
        })
        let directFee = []
        let indirectFee = []
        data.directAndIndirectRate.forEach(item => {
          this.generalList[2].eBarData.xAxis.data.push(item.name)
          this.generalList[2].eBarData.data[0].data.push(item.directRate)
          this.generalList[2].eBarData.data[1].data.push(item.indirectRate)
          directFee.push(item.directFee)
          indirectFee.push(item.indirectFee)
        })
        this.generalList[2].eBarData.tooltip = {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function(params) {
            let value = params[0]?.value
            let value2 = params[1]?.value
            let add1 = value || value == 0 ? params[0].seriesName + '比例:' + value + '%' + '  ' + '  ' + +directFee[params[0].dataIndex] + '万元' : ''
            let add2 = value2 || value2 == 0 ? params[1].seriesName + '比例:' + value2 + '%' + '  ' + '  ' + +indirectFee[params[0].dataIndex] + '万元' : ''
            return params[0].name + '<br/>' + add1 + '<br/>' + add2
          }
        }
        let feeArr = []
        data.manageFeeRate.forEach(item => {
          this.generalList[3].eBarData.xAxis.data.push(item.name)
          this.generalList[3].eBarData.data[0].data.push(item.rate)
          feeArr.push(item.fee)
        })
        this.generalList[3].eBarData.tooltip = {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function(params) {
            let value = params[0].value
            let seriesName = params[0].seriesName
            let fee = feeArr[params[0].dataIndex]
            let name = params[0].name
            return name + '<br/>' + seriesName + '：' + value + '%' + '  ' + '  ' + fee + '万元'
          }
        }
        let feeData = []
        data.civilizedConstructionFeeRate.forEach(item => {
          this.generalList[4].eBarData.xAxis.data.push(item.name)
          this.generalList[4].eBarData.data[0].data.push(item.rate)
          feeData.push(item.fee)
        })
        this.generalList[4].eBarData.tooltip = {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function(params) {
            let value = params[0].value
            let seriesName = params[0].seriesName
            let fee = feeData[params[0].dataIndex]
            let name = params[0].name
            return name + '<br/>' + seriesName + '：' + value + '%' + '  ' + '  ' + fee + '万元'
          }
        }
        let feeData1 = []
        data.temporarilyFeeRate.forEach(item => {
          this.generalList[5].eBarData.xAxis.data.push(item.name)
          this.generalList[5].eBarData.data[0].data.push(item.rate)
          feeData1.push(item.fee)
        })
        this.generalList[5].eBarData.tooltip = {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function(params) {
            let value = params[0].value
            let seriesName = params[0].seriesName
            let fee = feeData1[params[0].dataIndex]
            let name = params[0].name
            return name + '<br/>' + seriesName + '：' + value + '%' + '  ' + '  ' + fee + '万元'
          }
        }
        let feeData2 = []
        data.alterDiscussVisaFeeRate.forEach(item => {
          this.generalList[6].eBarData.xAxis.data.push(item.name)
          this.generalList[6].eBarData.data[0].data.push(item.rate)
          feeData2.push(item.fee)
        })
        this.generalList[6].eBarData.tooltip = {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function(params) {
            let value = params[0].value
            let seriesName = params[0].seriesName
            let fee = feeData2[params[0].dataIndex]
            let name = params[0].name
            return name + '<br/>' + seriesName + '：' + value + '%' + '  ' + '  ' + fee + '万元'
          }
        }
        this.genera = true
        this.spinning = false
      }, 500)
    },
    getEngineeringData() {
      this.building = false
      this.buildingList.forEach(item => {
        item.eBarData.xAxis.data = []
        item.eBarData.data.forEach(son => {
          son.data = []
        })
      })
      clearTimeout(this.timer2)
      this.timer2 = setTimeout(async () => {
        const { data } = await getFgsCivilEngineeringBulletinBoard({ id: this.id })
        data.ciSquareMetreCost.forEach(item => {
          this.buildingList[0].eBarData.xAxis.data.push(item.name)
          this.buildingList[0].eBarData.data[0].data.push(item.cost)
        })
        data.propertySquareMetreCost.forEach(item => {
          this.buildingList[1].eBarData.xAxis.data.push(item.name)
          this.buildingList[1].eBarData.data[0].data.push(item.cost)
        })
        data.standardSquareMetreCost.forEach(item => {
          this.buildingList[2].eBarData.xAxis.data.push(item.name)
          this.buildingList[2].eBarData.data[0].data.push(item.cost)
        })
        data.scaffoldSquareMetreCost.forEach(item => {
          this.buildingList[3].eBarData.xAxis.data.push(item.name)
          this.buildingList[3].eBarData.data[0].data.push(item.cost)
        })
        data.materialSquareMetreCost.forEach(item => {
          this.buildingList[4].eBarData.xAxis.data.push(item.name)
          this.buildingList[4].eBarData.data[0].data.push(item.cost)
        })
        data.artificialSquareMetreCost.forEach(item => {
          this.buildingList[4].eBarData.data[1].data.push(item.cost == 0.0 ? 0 : item.cost)
        })
        this.buildingList[4].eBarData.tooltip = {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function(params) {
            let value = params[0]?.value
            let value2 = params[1]?.value
            let add1 = value || value == 0 ? params[0].seriesName + ':' + value + '元' : ''
            let add2 = value2 || value2 == 0 ? params[1].seriesName + ':' + value2 + '元' : ''
            return params[0].name + '<br/>' + add1 + '<br/>' + add2
          }
        }
        // data.artificialSquareMetreCost.forEach(item => {
        //   this.buildingList[5].eBarData.xAxis.data.push(item.name)
        //   this.buildingList[5].eBarData.data[0].data.push(item.cost == 0.00 ?0 :item.cost)
        // })
        this.building = true
      }, 500)
    },
    getInstallData() {
      this.install = false
      this.installList.forEach(item => {
        item.eBarData.xAxis.data = []
        item.eBarData.data.forEach(son => {
          son.data = []
        })
      })
      clearTimeout(this.timer3)
      this.timer3 = setTimeout(async () => {
        const { data } = await getFgsInstallBulletinBoard({ id: this.id })
        data.drainageSquareMetreCost.forEach(item => {
          this.installList[0].eBarData.xAxis.data.push(item.name)
          this.installList[0].eBarData.data[0].data.push(item.cost)
        })
        data.electricalSquareMetreCost.forEach(item => {
          this.installList[1].eBarData.xAxis.data.push(item.name)
          this.installList[1].eBarData.data[0].data.push(item.cost)
        })
        data.havcSquareMetreCost.forEach(item => {
          this.installList[2].eBarData.xAxis.data.push(item.name)
          this.installList[2].eBarData.data[0].data.push(item.cost)
        })
        let drainageCostArr = []
        let electricalCostArr = []
        let havcCostArr = []
        data.variousTypeSquareMetreCostRate.forEach(item => {
          this.installList[3].eBarData.xAxis.data.push(item.name)
          this.installList[3].eBarData.data[0].data.push(item.drainageRate)
          this.installList[3].eBarData.data[1].data.push(item.electricalRate)
          this.installList[3].eBarData.data[2].data.push(item.havcRate)
          drainageCostArr.push(item.drainageCost)
          electricalCostArr.push(item.electricalCost)
          havcCostArr.push(item.havcCost)
        })
        this.installList[3].eBarData.tooltip = {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function(params) {
            let value = params[0]?.value
            let value1 = params[1]?.value
            let value2 = params[2]?.value
            let add1 = value || value == 0 ? params[0].seriesName + ':       ' + value + '%   ' + '  ' + '  ' + +drainageCostArr[params[0].dataIndex] + '万元' : ''
            let add2 = value1 || value1 == 0 ? params[1].seriesName + ':   ' + value1 + '%   ' + '  ' + '  ' + +electricalCostArr[params[0].dataIndex] + '万元' : ''
            let add3 = value2 || value2 == 0 ? params[2].seriesName + ':   ' + value2 + '%   ' + '  ' + '  ' + +havcCostArr[params[0].dataIndex] + '万元' : ''
            return params[0].name + '<br/>' + add1 + '<br/>' + add2 + '<br/>' + add3
          }
        }
        this.install = true
      }, 500)
    },
    getDecorationData() {
      this.decorate = false
      this.decorateList.forEach(item => {
        item.eBarData.data.forEach(son => {
          son.data = []
        })
        item.eBarData.xAxis.data = []
      })
      clearTimeout(this.timer4)
      this.timer4 = setTimeout(async () => {
        const { data } = await getFgsDecorationBulletinBoard({ id: this.id })
        data.hardcoverSquareMetreCost.forEach(item => {
          this.decorateList[0].eBarData.xAxis.data.push(item.name)
          this.decorateList[0].eBarData.data[0].data.push(item.cost)
        })
        data.exteriorSquareMetreCost.forEach(item => {
          this.decorateList[1].eBarData.xAxis.data.push(item.name)
          this.decorateList[1].eBarData.data[0].data.push(item.cost)
        })
        this.decorate = true
      }, 500)
    }
  }
}
</script>

<style lang="less" scoped>
.totalBox {
  padding-left: 20px;
}

.total {
  padding-left: 10px;
  height: 65px;
  line-height: 65px;
  background: inherit;
  background-color: rgba(255, 255, 255, 1);
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(255, 255, 255, 1);
  border-radius: 6px;
  font-weight: 700;
  font-style: normal;
  font-size: 18px;
  color: #666;
  -webkit-box-shadow: 0px 0px 10px rgba(242, 242, 242, 1);
  box-shadow: 0px 0px 10px rgba(242, 242, 242, 1);
}

.titleClass {
  margin: 0;
  padding-left: 25px; // 50

  .dotClass {
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 1px solid #4874cb;
    border-radius: 50%;
    background-color: #4874cb;
    margin-right: 10px;
  }
}
</style>
